<template>
  <view class="g-keyboard">
    <view class="keyboard-header">
      <view class="keyboard-header-input">{{ modelValue }}</view>
      <g-button
        text="确认"
        width="172.36rpx"
        radius="20.85rpx"
        size="25.02rpx"
        padding="16.68rpx"
        @click="handleConfirm"
      />
    </view>
    <view class="keyboard-body">
      <g-button
        v-for="(item, index) in dataList"
        :key="index"
        radius="13.9rpx"
        width="auto"
        weight="700"
        size="25.02rpx"
        padding="12.51rpx"
        color="#3D3D3D"
        background="#fff"
        :text="item.label"
        @click="handleClick(item)"
        @longpress="handleClick(item)"
      />
    </view>
    <g-toast :show="toastShow" :status="3" :text="toastText" />
  </view>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { onUnload } from "@dcloudio/uni-app";
// #ifdef APP-PLUS
// const scan = uni.requireNativePlugin("felix-scan-module"); // 扫码枪
// var globalEvent = uni.requireNativePlugin("globalEvent"); // 扫码枪监听
// #endif

const emit = defineEmits(["confirm"]);

const modelValue = ref<any>(""); // 取件码
const dataList = ref<any>([
  { label: "1", value: 1 },
  { label: "2", value: 2 },
  { label: "3", value: 3 },
  { label: "4", value: 4 },
  { label: "5", value: 5 },
  { label: "6", value: 6 },
  { label: "7", value: 7 },
  { label: "8", value: 8 },
  { label: "9", value: 9 },
  { label: "重置", value: -1 },
  { label: "0", value: 0 },
  { label: "删除", value: -2 },
]);
const toastShow = ref(false);
const toastText = ref("");

onMounted(() => {
  // #ifdef APP-PLUS
  initProt();
  // #endif
});

// 初始化
const initProt = () => {
  // scan.initUsb(); // 扫码枪初始化
  // globalEvent.addEventListener("onUsbBarcode", (e: any) => {
  //   if (e.barcode.length == 6) {
  //     modelValue.value = e.barcode;
  //     handleConfirm();
  //   } else {
  //     toastText.value = "取药码不正确";
  //     toastShow.value = true;
  //     setTimeout(() => {
  //       toastShow.value = false;
  //     }, 2000);
  //   }
  // });
  // globalEvent.addEventListener("usbListener", (e: any) => {
  //   console.log("监听USB：", e.time, e.data);
  // });
};

// 点击事件
const handleClick = (item: any) => {
  if (item.value === -1) {
    modelValue.value = "";
  } else if (item.value === -2) {
    modelValue.value = modelValue.value.slice(0, -1);
  } else {
    if (modelValue.value.length < 6) {
      modelValue.value += item.value;
    }
  }
};
// 确认事件
const handleConfirm = () => {
  if (modelValue.value.length < 6) {
    toastText.value = "取药码不完整";
    toastShow.value = true;
    setTimeout(() => {
      toastShow.value = false;
    }, 2000);
    return;
  }
  emit("confirm", modelValue.value);
};

onUnload(() => {
  // #ifdef APP-PLUS
  // scan.onStopUSBScan(); // 关闭扫码枪监听
  // #endif
});
</script>

<style lang="scss" scoped>
.g-keyboard {
  width: 100%;
  height: 426rpx;
  .keyboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    &-input {
      width: 474.68rpx;
      height: 69.5rpx;
      border-radius: 20.85rpx;
      background: #fff;
      padding: 0 22.24rpx;
      font-size: 25.02rpx;
      color: #3d3d3d;
      display: flex;
      align-items: center;
      margin-right: 36.14rpx;
    }
  }
  .keyboard-body {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 26.41rpx;
    margin-top: 27.8rpx;
  }
}
</style>
